/**
 * recordAsset接口参数输入弹窗
 * 允许用户手动输入dataDetails内容
 */

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Database, Hash, FileText, CheckCircle } from 'lucide-react';

interface RecordAssetModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (dataDetails: string) => void;
  dataHash: string;
  defaultDataDetails?: string;
}

export function RecordAssetModal({
  isOpen,
  onClose,
  onConfirm,
  dataHash,
  defaultDataDetails = ""
}: RecordAssetModalProps) {
  const [dataDetails, setDataDetails] = useState(defaultDataDetails);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (!dataDetails.trim()) {
      alert('请输入数据详情描述');
      return;
    }

    setIsSubmitting(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 500)); // 模拟处理时间
      onConfirm(dataDetails.trim());
      setIsSubmitting(false);
    } catch (error) {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    if (!isSubmitting) {
      onClose();
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
          onClick={handleClose}
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ type: "spring", duration: 0.3 }}
            className="relative w-full max-w-2xl mx-4 bg-slate-900 rounded-2xl shadow-2xl border border-slate-700"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b border-slate-700">
              <div className="flex items-center space-x-3">
                <div className="w-12 h-12 bg-quantum-blue/20 rounded-xl flex items-center justify-center">
                  <Database className="w-6 h-6 text-quantum-blue" />
                </div>
                <div>
                  <h2 className="text-xl font-semibold text-white">
                    📝 recordAsset 参数配置
                  </h2>
                  <p className="text-sm text-gray-400">
                    配置数据资产注册的详细信息
                  </p>
                </div>
              </div>
              <button
                onClick={handleClose}
                disabled={isSubmitting}
                className="w-8 h-8 flex items-center justify-center text-gray-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
              >
                <X size={20} />
              </button>
            </div>

            {/* Content */}
            <div className="p-6 space-y-6">
              {/* dataHash 显示 */}
              <div className="space-y-3">
                <label className="block text-sm font-medium text-gray-300 flex items-center space-x-2">
                  <Hash size={16} className="text-crypto-green" />
                  <span>dataHash (第一个参数)</span>
                </label>
                <div className="bg-slate-800 rounded-lg p-4 border border-slate-600">
                  <div className="flex items-center justify-between">
                    <code className="text-crypto-green font-mono text-sm break-all">
                      {dataHash}
                    </code>
                    <div className="flex items-center text-xs text-gray-400 ml-4">
                      <CheckCircle size={14} className="mr-1" />
                      已生成
                    </div>
                  </div>
                </div>
                <p className="text-xs text-gray-500">
                  💡 此值由 dataGenerator.ts 通过 Poseidon 哈希算法生成
                </p>
              </div>

              {/* dataDetails 输入 */}
              <div className="space-y-3">
                <label className="block text-sm font-medium text-gray-300 flex items-center space-x-2">
                  <FileText size={16} className="text-proof-purple" />
                  <span>dataDetails (第二个参数)</span>
                </label>
                <textarea
                  value={dataDetails}
                  onChange={(e) => setDataDetails(e.target.value)}
                  placeholder="请输入数据资产的详细描述信息..."
                  disabled={isSubmitting}
                  rows={4}
                  className="w-full bg-slate-800 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:border-proof-purple focus:outline-none transition-colors resize-none"
                />
                <p className="text-xs text-gray-500">
                  💡 示例：&quot;ZK proof for preImage: 888888&quot; 或 &quot;这是第一个详解&quot;
                </p>
              </div>

              {/* 接口预览 */}
              <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-600">
                <h4 className="text-sm font-semibold text-white mb-3 flex items-center">
                  🔍 接口调用预览
                </h4>
                <div className="space-y-2 text-xs font-mono">
                  <div className="text-gray-400">接口：POST /trans/handle</div>
                  <div className="text-gray-400">方法：recordAsset</div>
                  <div className="text-gray-400">参数格式：</div>
                  <pre className="text-crypto-green bg-slate-900 p-3 rounded border overflow-x-auto">
{`"funcParam": [
  "${dataHash}",
  "${dataDetails || '请输入详情...'}"
]`}
                  </pre>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="flex items-center justify-end space-x-3 p-6 border-t border-slate-700">
              <button
                onClick={handleClose}
                disabled={isSubmitting}
                className="px-6 py-2 text-gray-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
              >
                取消
              </button>
              <motion.button
                onClick={handleSubmit}
                disabled={!dataDetails.trim() || isSubmitting}
                whileHover={{ scale: !dataDetails.trim() || isSubmitting ? 1 : 1.02 }}
                whileTap={{ scale: !dataDetails.trim() || isSubmitting ? 1 : 0.98 }}
                className={`px-6 py-2 rounded-lg font-semibold transition-all flex items-center space-x-2 ${
                  !dataDetails.trim() || isSubmitting
                    ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
                    : 'bg-quantum-blue hover:bg-blue-600 text-white'
                }`}
              >
                {isSubmitting ? (
                  <>
                    <motion.div
                      animate={{ rotate: 360 }}
                      transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                      className="w-4 h-4 border-2 border-white border-t-transparent rounded-full"
                    />
                    <span>提交中...</span>
                  </>
                ) : (
                  <>
                    <CheckCircle size={16} />
                    <span>确认并调用</span>
                  </>
                )}
              </motion.button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
